<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第一人称视角移动</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <canvas id="mainCanvas"></canvas>
</body>
<script>
    let scene, camera, renderer, leftPress, cube, arrowFront, arrowFrontX, arrowFrontZ;
    let left, right, front, back;
    init();
    helper();
    animate();

    function init() {
        // 初始化场景
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        // 创建渲染器
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById("mainCanvas"),
            antialias: true, // 抗锯齿
            alpha: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);


        // 创建透视相机
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 10, 30);

        // 参数初始化
        mouse = new THREE.Vector2();
        raycaster = new THREE.Raycaster();

        // 环境光
        var ambientLight = new THREE.AmbientLight(0x606060);
        scene.add(ambientLight);
        // 平行光
        var directionalLight = new THREE.DirectionalLight(0xBCD2EE);
        directionalLight.position.set(1, 0.75, 0.5).normalize();
        scene.add(directionalLight);
    }

    function helper() {
        var grid = new THREE.GridHelper(100, 20, 0xFF0000, 0x000000);
        grid.material.opacity = 0.1;
        grid.material.transparent = true;
        scene.add(grid);

        var axesHelper = new THREE.AxesHelper(30);
        scene.add(axesHelper);
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        let vect = camera.getWorldDirection(new THREE.Vector3());
        if (front) {
            camera.position.z += vect.dot(new THREE.Vector3(0, 0, 15)) * 0.01;
            camera.position.x += vect.dot(new THREE.Vector3(15, 0, 0)) * 0.01;
        }
    }

    // $(window).mousemove(function (event) {
    //     event.preventDefault();
    //     if (leftPress) {
    //         camera.rotateOnWorldAxis(
    //             new THREE.Vector3(0, 1, 0),
    //             event.originalEvent.movementX / 500
    //         );
    //         camera.rotateOnAxis(
    //             new THREE.Vector3(1, 0, 0),
    //             event.originalEvent.movementY / 500
    //         );
    //     }
    // });

    // $(window).mousedown(function (event) {
    //     event.preventDefault();
    //     leftPress = true;

    // });

    // $(window).mouseup(function (event) {
    //     event.preventDefault();
    //     leftPress = false;
    // });

    $(window).keydown(function (event) {
        switch (event.keyCode) {
            case 65: // a
                left = true;
                break;
            case 68: // d
                right = true;
                break;
            case 83: // s
                back = true;
                break;
            case 87: // w
                front = true;
                break;
        }
    });

    $(window).keyup(function (event) {
        switch (event.keyCode) {
            case 65: // a
                left = false;
                break;
            case 68: // d
                right = false;
                break;
            case 83: // s
                back = false;
                break;
            case 87: // w
                front = false;
                break;
        }
    });
</script>

</html>